{template 'header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/member/address/edit.css">
<!--标准mui样式-->
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/mui/mui.min.css">
<!--<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/mui/mui.picker.min.css">-->
<!--三级级联引用样式-->
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/member/address/mui.picker.css">
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/member/address/mui.poppicker.css">
<!--三级级联引用样式-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<style>
    .mui-btn {
        font-size: 16px;
        padding: 8px;
        margin: 3px;
    }
    h5.mui-content-padded {
        margin-left: 3px;
        margin-top: 20px !important;
    }
    h5.mui-content-padded:first-child {
        margin-top: 12px !important;
    }
    .ui-alert {
        text-align: center;
        padding: 20px 10px;
        font-size: 16px;
    }
</style>
<header class="mui-bar mui-bar-nav" style="background: #72adf5;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" id="title" style="color: white;">地址编辑</h1>
</header>
<body>
    <div class="edit">
        <form>
            <ul>
                <li>
                    <span>收货人</span>
                    <input type="text" name="username" placeholder="请填写收货人姓名" class="username">
                </li>
                <li>
                    <span>联系电话</span>
                    <input type="text" name="tel" placeholder="请填写联系电话" class="tel">
                </li>
                <li>
                    <span>所在地区</span>
                    <input type="text" name="zoom" class="zoom" placeholder="请填写所在地区">
                </li>
                <li>
                    <div class="mui-content">
                        <div class="mui-content-padded" style="margin: 0px;padding: 0px;">
                            <h5 class="mui-content-padded" style="margin: 0px;padding: 0px;display: inline">详细地址</h5>
                            <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
                            <div id='cityResult3' class="ui-alert"></div>
                        </div>
                    </div>
                </li>
                <li>
                    <span>设置默认地址</span>
                    <div class="mui-switch mui-switch-blue mui-switch-mini" style="display: inline-block;float: right;width: 0.6rem;height: 0.3rem;margin-top: 0.25rem;margin-right: 0.2rem">
                        <div class="mui-switch-handle" style="width: 0.25rem;height: 0.25rem;"></div>
                    </div>
                </li>
            </ul>
                <!--阻止默认事件-->
                <button type="submit" onClick="return false;">登录</button>
        </form>
    </div>
</body>
<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/address/edit.js"></script>
<!--三级级联菜单插件-->
<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/address/mui.picker.js"></script>
<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/address/mui.poppicker.js"></script>
<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/address/city.data.js"></script>
<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/address/city.data-3.js"></script>
<!--三级级联菜单插件end-->
<script>
    (function($, doc) {
        $.init();
        $.ready(function() {
            //普通示例
            var userPicker = new $.PopPicker();
            var showUserPickerButton = doc.getElementById('showUserPicker');
            var userResult = doc.getElementById('userResult');
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    userResult.innerText = JSON.stringify(items[0]);
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
            //-----------------------------------------
            //级联示例
            var cityPicker = new $.PopPicker({
                layer: 2
            });
            cityPicker.setData(cityData);
            var showCityPickerButton = doc.getElementById('showCityPicker');
            var cityResult = doc.getElementById('cityResult');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker.show(function(items) {
                    cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
            //-----------------------------------------
            //					//级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker3.show(function(items) {
                    cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);
</script>

</html>